
<style  scoped>
.box1 {
  font-size: 25px;
  margin-left: 300px;


}

.box2 {
  margin-left: 300px;

}

h3 {
  margin-left: 300px;
}

button {
  margin: 5px;
}

table {
  width: 800px;
  text-align: center;
}
</style>
<template>
  <div>

    <!-- 我是主页面App
<router-view></router-view> -->
    <div class="box1">
      <h3>用户信息收集</h3>
      姓名： <input type="text" v-model="name" @keyup.13="add"><br>
      年龄： <input type="text" v-model="age" @keyup.13="add"><br>
      <button @click="add">提交</button>
      <button @click="chongzhi">重置</button>

      <table border="1">
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
        <tr v-for="(item,index) in list " :key="index">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td> <button @click="bianji(index)">编辑</button> <button @click="del(index)">删除</button></td>
        </tr>
      </table>
      <li v-if="list.length==0">暂无数据</li>



    </div>

    <div class="box2" v-show="flag">
      姓名： <input type="text" v-model="name1" @keyup.13="add"><br>
      年龄： <input type="text" v-model="age1" @keyup.13="add"><br>
      <button @click="add1(id)">提交</button>
      <button @click="chongzhi">重置</button>
    </div>

  </div>

</template>

<script>


export default {
  data() {
    return {
      id: 0,
      flag: false,
      list: JSON.parse(localStorage.getItem("list")) || [],
      name: "",
      age: "",
      name1: "",
      age1: "",
    };
  },

  components: {},

  computed: {},

  mounted() { },

  methods: {
    // 添加
    add() {
      var shuju = {
        name: this.name,
        age: this.age
      }
      this.list.push(shuju)
      localStorage.setItem("list", JSON.stringify(this.list))
    },
    // 重置
    chongzhi() {
      this.name = '',
        this.age = ''
    },
    // 单个删除
    del(index) {
      this.list.splice(index, 1)
      localStorage.setItem("list", JSON.stringify(this.list))
    },
    // 编辑
    bianji(index) {
      this.flag = true
      this.name1 = this.list[index].name
      this.age1 = this.list[index].age
    },
    // 添加
    add1(id) {
      this.id = id
      this.list[id].name = this.name1
      this.list[id].age = this.age1
      localStorage.setItem("list", JSON.stringify(this.list))
    }

  },
  watch: {},
  mixins: []
}

</script>
